<template>
  <div>
    <div v-if="!noData">
      <div class="select2Wrap">
        <!-- 学校简介 -->
        <div class="adToperBox" v-show="schoolImages.length > 0">
          <div class="adToper flex-h">
            <span class="flex1 sp1">
              <b>校园风光</b>
            </span>
          </div>
        </div>
        <div
          class="schoolImages swiper-container"
          id="activitySwiper"
          v-show="schoolImages.length > 0"
        >
          <leftScroll :slideWidth="slideWidth">
              <div class="swiper-wrapper sschoolImgBox" ref="boxWidth" :style="boxWidthStyle">
                <div class="schoolImgList swiper-slide">
                  <img
                    class="itemImg"
                    v-for="(item, index) of schoolImages"
                    :key="index"
                    :src="item"
                    @click="handleTurnBigImg(item,index)"
                  />
                </div>
              </div>
          </leftScroll>
        </div>
        <!-- 学校简介 -->
        <div class="video-box"  v-show="videourl">
           <!-- <video id="v3" :src="videourl" controls="controls" style="width: 100%; border-radius: 0.1rem; object-fit：fill; position: relative; top: 0; left: 0;" />
            <div class="tuceng"></div> -->
          <div class="videoArea">
            <video id="v3" :src="videourl" style="width: 6.86rem; border-radius: 0.1rem; object-fit：fill; position: relative; top: 0; left: 0;" />
            <div   class="controlBtn" @click="handlePlayVideo" :style="videobg"><img v-show="!videoPlay" src="~/static/playBtn.png" alt=""></div>
          </div>
        </div>
        <div class="adToperBox" v-show="introText !== ''">
          <div class="adToper flex-h">
            <span class="flex1 sp1">
              <b>学校简介</b>
            </span>
          </div>
        </div>
        <div class="textBox" v-show="introText !== ''">
          <div class="content" v-html="introText"></div>
        </div>
        <div class="division" v-show="introText !== ''"></div>
        <!-- 师资力量 -->
        <div class="adToperBox" v-show="teacherPower !== ''">
          <div class="adToper flex-h">
            <span class="flex1 sp1">
              <b>师资力量</b>
            </span>
          </div>
        </div>
        <div class="textBox" v-show="teacherPower !== ''">
          <div class="content" v-html="teacherPower"></div>
        </div>
        <div class="modelArea" v-for="(item, index) of extraData" :key="index">
          <div class="tipTitle">{{ item.label }}</div>
          <div v-if="item.children.length <= 1">
            <div class="singlecontent">
              <div class="number">{{ item.children[0] ? item.children[0].value : '' }}</div>
              <div class="name">{{ item.children[0] ? item.children[0].label : '' }}</div>
            </div>
          </div>
          <div v-else>
            <div class="groupContent">
              <div class="singleItem" v-for="(m, n) of item.children" :key="n">
                <div class="number">{{ m.value }}</div>
                <div class="name">{{ m.label }}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="division" v-show="graduateMsg !== ''"></div>
        <!-- 毕业信息 -->
        <div class="adToperBox" v-show="graduateMsg !== ''">
          <div class="adToper flex-h">
            <span class="flex1 sp1">
              <b>毕业信息</b>
            </span>
          </div>
        </div>
        <div class="textBox" v-show="graduateMsg !== ''">
          <div class="content" v-html="graduateMsg"></div>
        </div>
        <!-- 知名校友 -->
        <div class="adToperBox" v-show="famousMan !== ''">
          <div class="adToper flex-h">
            <span class="flex1 sp1">
              <b>知名校友</b>
            </span>
          </div>
        </div>

        <div class="describe" v-show="famousMan !== ''">这些名人曾在这里读书</div>
        <div class="textBox" v-show="famousMan !== ''">
          <div class="content" v-html="famousMan"></div>
        </div>
      </div>
    </div>
    <div v-else>
      <div class="noDataImage">
        <img src="~/static/nothing/empty_meiyoushuju.png" alt />
        <div class="describe">抱歉，这个页面暂无数据~</div>
      </div>
    </div>
    <div v-transfer-dom>
      <previewer :list="list" ref="previewer" :options="options" @on-index-change="logIndexChange"></previewer>
    </div>
  </div>
</template>

<script>
import { profile } from "~/api/colleges";
import { getacademyCode, getAcademyOverview } from "~/api/school";
import {  Previewer, TransferDom  } from "vux";
import leftScroll from './leftScroll'
import ls from 'store2'
export default {
  components: {
    Previewer,
    leftScroll

  },
  directives: {
    TransferDom
  },
  props: {},
  data() {
    return {
      bgImg:require('~/static/header.png'),
      videobg: '',
      videoPlay: false,
      boxWidthStyle:'',
      slideWidth:0,
      enlargeimg:'',
      options: {
        getThumbBoundsFn(index) {
        }
      },
      list: [],
      introText: "", // 学校简介
      schoolImages: [], // 校园风光
      teacherPower: "", // 师资力量
      extraData: {}, // 额外数据，千人计划等
      graduateMsg: "", // 毕业信息
      famousMan: "", // 知名校友
      imgDialog: false,
      choImage: "",
      noData: true,
      videourl:''
    };
  },
  computed: {},
  mounted: function() {
    this.getAcademyDetail();
    this.getprofile()

  },
  methods: {
       handlePlayVideo() {
      if (!this.videoPlay) {
        v3.play();
        this.videobg = 'background:none'
        this.videoPlay = true;
      } else {
        v3.pause();
        this.videoPlay = false;
      }
      
    },
    moves(e){
      console.log('e: ', e);

    },
    moveends (e){
      window.scroll(0,0)
      console.log('e:1111 ', e);

    },
    		getprofile() {
				profile({
					"academyCode": this.commonJs.GetUrlParam('academyCode'),
					"fromUser": ls.get('yxkData').userId
				}).then(res => {
					if (res.code === '0') {
            this.videourl = res.data.video
            
					}
				}).catch((error) => {

				})
			},
    logIndexChange (arg) {
    },
    // 获取院校概况信息
    getAcademyDetail() {
      getAcademyOverview(this.commonJs.GetUrlParam('academyCode')).then(res => {
        this.introText = res.intro ? res.intro : "";
        this.schoolImages = res.images ? res.images : []
        let imgbj = res.cover_image_url
        imgbj?imgbj = imgbj:imgbj =  this.bgImg 
        this.videobg = "backgroundImage: url(" + imgbj +"); backgroundSize:100% 100%; backgroundRepeat:no-repeat"
        if (this.schoolImages.length > 0) {
          this.schoolImages.forEach(item => {
            this.list.push({
              src: item,
              w: 1200,
              h: 900
            });
          });
        }
        this.teacherPower = res.power ? res.power : "";
        this.extraData = res.extra_data ? JSON.parse(res.extra_data) : [];
        this.graduateMsg = res.graduate ? res.graduate : "";
        this.famousMan = res.famous_man ? res.famous_man : "";
        if (
          this.extraData.length == 0 &&
          this.schoolImages.length == 0 &&
          this.introText == "" &&
          this.teacherPower == "" &&
          this.graduateMsg == "" &&
          this.famousMan == ""
        ) {
          this.noData = true;
        } else {
          this.noData = false;
        }
        setTimeout(()=>{
          let imgwdith = Math.floor(document.body.clientWidth/7.5*3.3)
          this.boxWidthStyle ='width:'+ imgwdith*this.schoolImages.length+'px'         
        },50)
      });
    },
    handleTurnBigImg(img, index) {
      this.$refs.previewer.show(index);
    },
    goback() {
      this.choImage = "";
      this.imgDialog = false;
    }
  }
};
</script>


<style lang="less">

.select2Wrap {
  width: 7.5rem;
  height: auto;
  background: #fff;
  padding-top: 0.2rem;
  padding-bottom: 0.8rem;
  .video-box,
  .adToperBox,
  .textBox {
    width: 100%;
    padding: 0 0.3rem;
    box-sizing: border-box;
  }
  .video-box{
    margin-top: 0.2rem;
    // position: relative;
    // z-index: 1;
     .videoArea {
        position: relative;
        height: 4rem;
        .controlBtn {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          text-align: center;
          padding-top: 15%;
          // background: url('~/static/header.png') no-repeat;
          // background-size:100% 100%; 
          border-radius: 0.1rem;
          img {
            width: 1.88rem;
            height: 1.88rem;
          }
        }
      }
  }

  .adToperBox {
    margin-bottom: 0.2rem;
    height: 0.9rem;

    span {
      font-size: 0.28rem;
      line-height: 0.9rem;

      b {
        font-size: 0.34rem;
        font-weight: bold;
        color: rgba(34, 34, 34, 1);
        vertical-align: middle;
        margin-left: 0.1rem;
      }

      .imgIcon {
        width: 0.24rem;
        height: 0.24rem;
        vertical-align: middle;
      }
    }

    .sp1 {
      text-align: left;
    }

    .sp2 {
      width: 3rem;
      text-align: right;

      .imgIcon {
        vertical-align: middle;
        width: 0.4rem;
        height: 0.4rem;
      }
    }
  }

  .textBox {
    height: auto;

    .content {
      margin-bottom: 0.32rem;
      img {
        width: 100%;
      }
    }

    span {
      font-size: 0.28rem;
      min-height: 1.2rem;
      font-weight: 500;
      color: rgba(153, 153, 153, 1);
      line-height: 0.4rem;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;

      img {
        width: 100%;
        height: auto;
        display: block;
      }

      p {
        display: inline-block;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
  }

  .schoolImages {
    width: 100%;
    height: 2rem;
    box-sizing: border-box;
    padding-left: 0.32rem;
    overflow: hidden;
    .sschoolImgBox {
      width: auto;
    }
    .schoolImgList {
      width: auto;
      height: 2rem;
      .itemImg {
        display: block;
        width: 3rem;
        height: 2rem;
        margin-right: 0.24rem;
        float: left;
        border-radius: 0.1rem;
      }
    }
  }

  .division {
    height: 1px;
    background: #e5e8ed;
    margin: 0.4rem 0.32rem;
  }

  .modelArea {
    height: auto;
    border: 1px solid #e5e8ed;
    border-radius: 0.1rem;
    margin: 0 0.32rem 0.4rem;
    .tipTitle {
      width: 100%;
      height: 0.72rem;
      line-height: 0.72rem;
      background: #f7f7fa;
      text-align: center;
    }
    .singlecontent {
      text-align: center;
      padding: 0.32rem 0;
      .number {
        color: @mainColor;
        font-size: 0.36rem;
        font-weight: bold;
        line-height: 0.5rem;
        margin-bottom: 0.08rem;
      }
      .name {
        color: #222;
        font-size: 0.24rem;
        line-height: 0.33rem;
      }
    }
    .groupContent {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      .singleItem {
        width: 2.27rem;
        height: 1.55rem;
        text-align: center;
        padding: 0.32rem 0;
      }
      .number {
        color: @mainColor;
        font-size: 0.36rem;
        font-weight: bold;
        line-height: 0.5rem;
        margin-bottom: 0.08rem;
      }
      .name {
        color: #222;
        font-size: 0.24rem;
        line-height: 0.33rem;
      }
    }
  }

  .describe {
    color: #999;
    font-size: 0.28rem;
    line-height: 0.44rem;
    margin: 0 0.32rem 0.3rem;
  }
}
.imgDialog {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
}
.outDivdes {
  width: 100%;
  height: 100vh;
  background: #fff;

  .backToPer {
    padding: 0 0.32rem;
    width: 100%;
    height: 0.88rem;
    line-height: 0.88rem;
    text-align: left;
    overflow: hidden;
    img {
      display: inline-block;
      width: 0.4rem;
      height: 0.4rem;
      margin-bottom: 0.2rem;
    }
  }

  .mainsss {
    padding: 0 0.32rem;
    width: 100%;
  }
}
.noDataImage {
  width: 7.5rem;
  height: auto;
  background: #fff;
  padding-top: 0.4rem;
  padding-bottom: 0.8rem;
  text-align: center;
  img {
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 0.24rem;
  }
  .describe {
    color: #999;
    font-size: 0.28rem;
    line-height: 0.4rem;
  }
}
</style>
